<template>
  <div class="breadcrumb flex5" v-if="isShow">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item
        v-for="(item, index) in breadcrumbList"
        :to="{ path: item.path }"
        >{{ item.name }}</el-breadcrumb-item
      >
    </el-breadcrumb>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import {getBreadcrumbName} from "../../utils/getSider/getBreadSiderName";
// 初始数据
let breadcrumbList = ref([{ name: "工作台", path: "/WorkTable" }]);
//监听路由变化
let router = useRouter();
let route = useRoute();
//面包屑出现消失
let isShow=ref(true)
watch(
  () => route.fullPath,
  (newval) => {
    // 当前路由为工作台时，面包屑不显示
    if(newval!=='/WorkTable'){
      isShow.value=true
      splicing(getBreadcrumbName(newval));
    }else{
      isShow.value=false
    }
   
  },
  { deep: true ,immediate:true}
);
// 封拼接方法
function splicing(value: any) {
  if (value == "/WorkTable") {
    breadcrumbList.value= [{ name: "工作台", path: "/WorkTable" }]
  } else {
    breadcrumbList.value= [{ name: "工作台", path: "/WorkTable" }];
    breadcrumbList.value=breadcrumbList.value.concat(value);
  }
}
</script>

<style scoped>
.breadcrumb {
  background-color: #fff;
}
</style>
